<template>
  <div>
    <el-card>
    <el-row :gutter="10" class="elrow">
      <el-col :span="4">
        <el-select placeholder="请选择" v-model="formData.value">
          <el-option label="检索类型" value="0" disabled></el-option>
          <el-option label="姓名" value="1"></el-option>
          <el-option label="身份证号" value="2"></el-option>
          <el-option label="联系方式" value="3"></el-option>
          <el-option label="邮箱" value="4"></el-option>
        </el-select>
      </el-col>
      <el-col :span="10">
        <el-input placeholder="请输入检索信息" v-model="formData.input" maxlength="18"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" icon="el-icon-search" v-on:click="getTabsList(1,4)">搜索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="tableData" :key="updateKey" style="width: 100%" border>
        <el-table-column type="index" :index="indexMethod" label="#"></el-table-column>
        <el-table-column label="姓名" align="center" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="头像" align="center" width="150">
          <template slot-scope="scope">
            <el-image
              class="table-td-thumb"
              style="width: 100px; height: 100px"
              :src="scope.row.head"
              :preview-src-list="[scope.row.head]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center" width="50">
          <template slot-scope="scope">
            <span style="color:rgb(204,0,51)">{{ scope.row.sex}}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号码" align="center" width="180">
          <template slot-scope="scope">
            <span style="color:rgb(0, 208, 83)">{{scope.row.tele}}</span>
          </template>
        </el-table-column>
        <el-table-column label="身份证号" align="center" width="150">
          <template slot-scope="scope">
            <span>
              <el-tag size="medium">{{ scope.row.sfz}}</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="学历" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.xl}}</span>
          </template>
        </el-table-column>
        <el-table-column label="报考意向" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.intention}}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址" align="center" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.address}}</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" align="center" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.email}}</span>
          </template>
        </el-table-column>
        <el-table-column label="介绍">
          <template slot-scope="scope">
            <span>{{ scope.row.intro}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="AccountReset(scope.$index,scope.row)">账号重置</el-button>
            <el-button v-if="scope.row.state == '1'" type="danger" size="mini"
                       v-on:click="AccountDisable(scope.$index,scope.row)">封禁</el-button>
            <el-button v-else type="primary" size="mini" @click="AccountEnable(scope.$index,scope.row)">解禁</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index,scope.row)"></el-button>   
          </template>
        </el-table-column>
      </el-table>
    </el-row>
      <!--分页组件-->
      <div style="text-align: center;margin-top: 30px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pagesize"
          :total="total"
          :current-page="currentPage"
          @current-change="current_change">
        </el-pagination>
      </div>
      </el-card>
    <el-dialog title="封号详情" :visible.sync="dialogFormVisible" width="500px" center>
      <el-form ref="disable" :model="disableInfo">
        <el-form-item label="请选择理由" label-width="100px" prop="reason">
          <el-col :span="200">
            <el-select v-model="disableInfo.reason" placeholder="请选择原因" @change="enableButton">
              <el-option value="侮辱谩骂" label="侮辱谩骂"></el-option>
              <el-option value="传播不实言论" label="传播不实言论"></el-option>
              <el-option value="账号违规" label="账号违规"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="详细描述" label-width="100px">
          <el-col :span="200">
            <el-input
              v-model="disableInfo.other"
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 10}"
              maxlength="100"
              style="width: 300px"
              show-word-limit
              placeholder="请输入内容"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item align="center">
          <template slot-scope="scope">
            <el-button :disabled="usebutton" type="primary" v-on:click="Confirm">确定</el-button>
            <el-button v-on:click="Cancel">取消</el-button>
          </template>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    data() {
      return {
        dialogFormVisible: false,
        isDisable: false,
        usebutton: true,
        updateKey: 0,
        index: 0,
        tableData: [],
        rowtemp: [],
        formData:{
          input: '',
          value: '0'
        },
        disableInfo:{
          sid:'',
          reason:'',
          other: ''
        },
        total: 0,
        pagesize:4,
        currentPage:1,
      };
    },
    methods: {
      current_change(val){
        this.currentPage = val;
        console.log(val);
        console.log(this.currentPage);
        this.getTabsList(this.currentPage,this.pagesize);
        // console.log(this.tableData);
      },
      indexMethod(index){
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      getTabsList(currentPage,pagesize) {
        console.log();
        //this.getTotalNum();
        this.$axios
          .get("/getLimitStudent", {
            params:{
              input: this.formData.input,
              value: this.formData.value,
              currentpage :currentPage,
              pagesize: pagesize
            }
          })
          .then(res => {
            //			console.log(res)
            const data = res.data;
            this.tableData = data.data;
            this.total = res.data.length;
            console.log(res.data.length);
            //   console.log(this.tableData)
          })
      },
      AccountReset(index,row){
        this.$confirm("是否重置该账号?", "提示", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          type: "warning"
        })
        .then(()=>{
          this.$axios
          .get("/resetpwd", {
            params:{
              sid: row.sid
            }
          })
          .then((res =>{
            if(res.data.code == 200){
              this.$message({
                type: "success",
                message: "重置成功，密码为身份证后八位"
              });
            }else{
              this.$message({
                type: "warning",
                message: "您无该权限"
              });
            }
          }))
        })
      },
      enableButton(){
        this.usebutton = false;
      },
      Confirm(){
        // 数据库操作
        this.$axios
          .post("/diableaccount",this.disableInfo)
          .then(res =>{
            console.log(res.data.code);
            if(res.data.code === 200){
              this.$message({
                type: "success",
                message: "封禁成功!"
              });
              this.rowtemp.state = '0';
              Vue.set(this.tableData,this.index,this.rowtemp);
              this.updateKey = Math.random();
              console.log(this.tableData);
            }else{
              this.$message({
                type: "error",
                message: "您没有该权限!"
              })
            }
          });
        this.dialogFormVisible = false;
      },
      Cancel(){
        this.dialogFormVisible = false;
      },
      AccountDisable(index,row){
        this.dialogFormVisible = true;
        this.disableInfo.sid = row.sid;
        this.index = index;
        this.rowtemp = row;
        console.log(row);
     },
      AccountEnable(index,row){
        this.$confirm("是否解封", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          this.$axios
          .get("/enableaccount",{
            params:{
              sid: row.sid
            }
          })
          .then(res => {
            if(res.data.code === 200){
              this.$message({
                type: "success",
                message: "解封成功"
              });
              row.state = '1';
              this.updateKey = Math.random();
            }else {
              this.$message({
                type: "error",
                message: "您没有该权限"
              })
            }
          })
        })
      },
      handleDelete(index,row){
        this.$confirm("永久删除该条信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // 移除对应索引位置的数据，可以对row进行设置向后台请求删除数据
            this.$axios
            .get("/deletestudent",{
              params: row.sid
            }).then(res =>{
              if(res.data.code === 200){
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.tableData.splice(index, 1);
                this.updateKey = Math.random();
              }else{
                this.$message({
                  type: "error",
                  message: "您没有删除该学生的权限"
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
    },
    mounted() {
      this.getTabsList(1,4);
    }
  };
</script>

<style scoped>
  .touzilist {
    margin: 10px;
  }
  .elrow{
    margin-bottom: 20px;
  }
  .el-input__inner{
    width: 190px;
  }

</style>
